<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预约挂号 - 宠物医院管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-2 p-0">
                <%@ include file="../common/user-sidebar.jsp" %>
            </div>
            
            <!-- 主内容区 -->
            <div class="col-md-10">
                <div class="main-content p-4">
                    <!-- 页面标题 -->
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h2><i class="fas fa-calendar-plus me-2"></i>预约挂号</h2>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="${pageContext.request.contextPath}/pages/user/dashboard.jsp">首页</a></li>
                                <li class="breadcrumb-item"><a href="${pageContext.request.contextPath}/appointment/my-appointments?action=my-appointments">我的预约</a></li>
                                <li class="breadcrumb-item active">预约挂号</li>
                            </ol>
                        </nav>
                    </div>

                    <!-- 提示信息 -->
                    <c:if test="${not empty error}">
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle me-2"></i>${error}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    </c:if>

                    <!-- 预约表单 -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-calendar-check me-2"></i>预约信息</h5>
                        </div>
                        <div class="card-body">
                            <form action="${pageContext.request.contextPath}/appointment/add" method="post" id="appointmentForm">
                                <input type="hidden" name="action" value="add">
                                
                                <div class="row">
                                    <!-- 基本信息 -->
                                    <div class="col-md-6">
                                        <h6 class="text-primary mb-3"><i class="fas fa-info-circle me-2"></i>基本信息</h6>
                                        
                                        <div class="mb-3">
                                            <label for="petId" class="form-label">选择宠物 <span class="text-danger">*</span></label>

                                            <!-- 调试信息 -->
                                            <div class="alert alert-info">
                                                <strong>调试信息:</strong><br>
                                                当前用户: ${sessionScope.currentUser.username} (ID: ${sessionScope.currentUser.userId})<br>
                                                宠物列表状态: ${empty myPets ? '空' : '有数据'}<br>
                                                <c:if test="${not empty myPets}">
                                                    宠物详情:<br>
                                                    <c:forEach var="pet" items="${myPets}">
                                                        - ID: ${pet.petId}, 名称: "${pet.petName}", 类型: ${pet.petType}<br>
                                                    </c:forEach>
                                                </c:if>
                                            </div>

                                            <select class="form-select" id="petId" name="petId" required>
                                                <option value="">请选择宠物</option>
                                                <c:forEach var="pet" items="${myPets}">
                                                    <option value="${pet.petId}" ${appointment.petId == pet.petId ? 'selected' : ''}>
                                                        ${pet.petName} (${pet.petType})
                                                    </option>
                                                </c:forEach>
                                            </select>
                                            <c:if test="${empty myPets}">
                                                <div class="form-text text-warning">
                                                    您还没有宠物档案，请先 <a href="${pageContext.request.contextPath}/pet/add">添加宠物</a>
                                                </div>
                                            </c:if>
                                            <c:if test="${not empty myPets}">
                                                <div class="form-text text-muted">
                                                    已找到您的宠物
                                                </div>
                                            </c:if>
                                        </div>

                                        <div class="mb-3">
                                            <label for="serviceType" class="form-label">服务类型 <span class="text-danger">*</span></label>
                                            <select class="form-select" id="serviceType" name="serviceType" required>
                                                <option value="">请选择服务类型</option>
                                                <option value="体检" ${appointment.serviceType == '体检' ? 'selected' : ''}>体检</option>
                                                <option value="疫苗接种" ${appointment.serviceType == '疫苗接种' ? 'selected' : ''}>疫苗接种</option>
                                                <option value="驱虫" ${appointment.serviceType == '驱虫' ? 'selected' : ''}>驱虫</option>
                                                <option value="绝育手术" ${appointment.serviceType == '绝育手术' ? 'selected' : ''}>绝育手术</option>
                                                <option value="外科手术" ${appointment.serviceType == '外科手术' ? 'selected' : ''}>外科手术</option>
                                                <option value="内科治疗" ${appointment.serviceType == '内科治疗' ? 'selected' : ''}>内科治疗</option>
                                                <option value="皮肤病治疗" ${appointment.serviceType == '皮肤病治疗' ? 'selected' : ''}>皮肤病治疗</option>
                                                <option value="眼科检查" ${appointment.serviceType == '眼科检查' ? 'selected' : ''}>眼科检查</option>
                                                <option value="牙科护理" ${appointment.serviceType == '牙科护理' ? 'selected' : ''}>牙科护理</option>
                                                <option value="美容护理" ${appointment.serviceType == '美容护理' ? 'selected' : ''}>美容护理</option>
                                                <option value="急诊治疗" ${appointment.serviceType == '急诊治疗' ? 'selected' : ''}>急诊治疗</option>
                                                <option value="其他" ${appointment.serviceType == '其他' ? 'selected' : ''}>其他</option>
                                            </select>
                                        </div>

                                        <div class="mb-3">
                                            <label for="appointmentDate" class="form-label">预约日期 <span class="text-danger">*</span></label>
                                            <input type="date" class="form-control" id="appointmentDate" name="appointmentDate" 
                                                   value="${appointment.appointmentDate}" required onchange="loadAvailableSlots()">
                                        </div>

                                        <div class="mb-3">
                                            <label for="appointmentTime" class="form-label">预约时间 <span class="text-danger">*</span></label>
                                            <select class="form-select" id="appointmentTime" name="appointmentTime" required>
                                                <option value="">请先选择日期</option>
                                            </select>
                                        </div>

                                        <div class="mb-3">
                                            <label for="doctorName" class="form-label">指定医生</label>
                                            <select class="form-select" id="doctorName" name="doctorName">
                                                <option value="">不指定（由医院安排）</option>
                                                <option value="张医生" ${appointment.doctorName == '张医生' ? 'selected' : ''}>张医生</option>
                                                <option value="李医生" ${appointment.doctorName == '李医生' ? 'selected' : ''}>李医生</option>
                                                <option value="王医生" ${appointment.doctorName == '王医生' ? 'selected' : ''}>王医生</option>
                                                <option value="刘医生" ${appointment.doctorName == '刘医生' ? 'selected' : ''}>刘医生</option>
                                                <option value="陈医生" ${appointment.doctorName == '陈医生' ? 'selected' : ''}>陈医生</option>
                                            </select>
                                        </div>
                                    </div>

                                    <!-- 详细信息 -->
                                    <div class="col-md-6">
                                        <h6 class="text-primary mb-3"><i class="fas fa-clipboard me-2"></i>详细信息</h6>
                                        
                                        <div class="mb-3">
                                            <label for="symptoms" class="form-label">症状描述</label>
                                            <textarea class="form-control" id="symptoms" name="symptoms" 
                                                      rows="6" maxlength="500" placeholder="请详细描述宠物的症状或需要的服务">${appointment.symptoms}</textarea>
                                            <div class="form-text">详细的症状描述有助于医生更好地准备和诊断</div>
                                        </div>

                                        <div class="mb-3">
                                            <label for="notes" class="form-label">备注信息</label>
                                            <textarea class="form-control" id="notes" name="notes" 
                                                      rows="4" maxlength="500" placeholder="其他需要说明的信息">${appointment.notes}</textarea>
                                            <div class="form-text">如特殊要求、联系方式等</div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 提交按钮 -->
                                <div class="row mt-4">
                                    <div class="col-12">
                                        <div class="d-flex justify-content-end">
                                            <a href="${pageContext.request.contextPath}/appointment/my-appointments?action=my-appointments" 
                                               class="btn btn-outline-secondary me-2">
                                                <i class="fas fa-times me-2"></i>取消
                                            </a>
                                            <button type="submit" class="btn btn-primary">
                                                <i class="fas fa-save me-2"></i>提交预约
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- 预约须知 -->
                    <div class="card mt-4">
                        <div class="card-header">
                            <h6 class="mb-0"><i class="fas fa-info-circle me-2"></i>预约须知</h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6 class="text-primary">预约流程</h6>
                                    <ol>
                                        <li>填写预约信息并提交</li>
                                        <li>等待医院确认预约</li>
                                        <li>按时到院就诊</li>
                                        <li>完成诊疗服务</li>
                                    </ol>
                                </div>
                                <div class="col-md-6">
                                    <h6 class="text-primary">注意事项</h6>
                                    <ul>
                                        <li>请提前至少1天预约</li>
                                        <li>急诊患者请直接到院</li>
                                        <li>预约确认后请按时到院</li>
                                        <li>如需取消请提前通知</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 页面加载完成后的调试信息
        document.addEventListener('DOMContentLoaded', function() {
            console.log('页面加载完成');

            // 检查宠物选择框
            const petSelect = document.getElementById('petId');
            console.log('宠物选择框元素:', petSelect);
            console.log('宠物选择框选项数量:', petSelect.options.length);

            for (let i = 0; i < petSelect.options.length; i++) {
                console.log('选项 ' + i + ':', petSelect.options[i].value, petSelect.options[i].text);
            }
        });
    </script>
    <script>
        // 设置最小日期为明天
        document.addEventListener('DOMContentLoaded', function() {
            const today = new Date();
            const tomorrow = new Date(today);
            tomorrow.setDate(tomorrow.getDate() + 1);
            
            const dateInput = document.getElementById('appointmentDate');
            dateInput.min = tomorrow.toISOString().split('T')[0];
        });

        // 加载可用时间段
        function loadAvailableSlots() {
            const date = document.getElementById('appointmentDate').value;
            const timeSelect = document.getElementById('appointmentTime');
            
            if (!date) {
                timeSelect.innerHTML = '<option value="">请先选择日期</option>';
                return;
            }
            
            fetch('${pageContext.request.contextPath}/appointment/getAvailableSlots?action=getAvailableSlots&date=' + date)
                .then(response => response.json())
                .then(data => {
                    timeSelect.innerHTML = '<option value="">请选择时间</option>';
                    data.forEach(time => {
                        const option = document.createElement('option');
                        option.value = time;
                        option.textContent = time;
                        timeSelect.appendChild(option);
                    });
                })
                .catch(error => {
                    console.error('Error:', error);
                    timeSelect.innerHTML = '<option value="">加载失败，请重试</option>';
                });
        }

        // 表单验证
        document.getElementById('appointmentForm').addEventListener('submit', function(e) {
            const petId = document.getElementById('petId').value;
            const serviceType = document.getElementById('serviceType').value;
            const appointmentDate = document.getElementById('appointmentDate').value;
            const appointmentTime = document.getElementById('appointmentTime').value;
            
            if (!petId) {
                e.preventDefault();
                alert('请选择宠物');
                document.getElementById('petId').focus();
                return;
            }
            
            if (!serviceType) {
                e.preventDefault();
                alert('请选择服务类型');
                document.getElementById('serviceType').focus();
                return;
            }
            
            if (!appointmentDate) {
                e.preventDefault();
                alert('请选择预约日期');
                document.getElementById('appointmentDate').focus();
                return;
            }
            
            if (!appointmentTime) {
                e.preventDefault();
                alert('请选择预约时间');
                document.getElementById('appointmentTime').focus();
                return;
            }
        });
    </script>
</body>
</html>
